<template>
  <div class="home">
    <top-bar-switch @nowBarName="nowBarNameChange" />

    <div class="map-wrapper" v-if="statusCom ===''" ref="mapDOM"></div>
    <!-- <div class="map-wrapper" ref="mapDOM"></div> -->

    <sensor-cont
      v-if="BarName === '预警一张图'"
      :SensorMap="SensorMap"
      @SensorZoomTo="handleZoomTo"
      @SensorBackTo="handleBackTo"
    ></sensor-cont>

    <fire-cont
      v-if="BarName === '火区数据管理'"
      :FireMap="FireMap"
      @FireZoomTo="handleZoomTo"
      @FireBackTo="handleBackTo"
      @StatusComStatus="handleStatusCom"
    ></fire-cont>

    <mine-cont
      v-if="BarName === '矿山信息管理'"
      :MineMap="MineMap"
      @MineZoomTo="handleZoomTo"
      @MineBackTo="handleBackTo"
    ></mine-cont>

    <bullet-box
      class="bullet"
      ref="msgForm"
      :dataOutPut="dataOutPutData"
      @closeBullet="closeBulletChange"
    ></bullet-box>

    <!-- 地图基本要素 -->
    <div class="position-bar-container-1">
      <div id="scale-line-container-1"></div>
      <div class="zoom-label-contaienr">级别:{{ zoom }}</div>
      <div class="coordinate-lebel-contaienr">
        <div class="lgtd-container">经度:{{ lgtd }}</div>
        <div class="lttd-container">纬度:{{ lttd }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBarSwitch from "../../../src/views/reviews/components/TopBarSwitch.vue";

import SensorCont from "../../views/reviews/components/OneMap/SensorCont.vue";
import FireCont from "../../views/reviews/components/FireManagement/FireCont.vue";
import MineCont from "../../views/reviews/components/MineManagement/MineCont.vue";
import BulletBox from "../../views/reviews/components/BulletBox/BulletBox.vue";

import { Map, View, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { defaults as defaultControls } from "ol/control";
import ScaleLine from "ol/control/ScaleLine";
import { GeoJSON } from "ol/format";
import { Fill, Stroke, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import BoundaryAreaJson from "../../../static/新疆维吾尔自治区.json";
import MaskFilter from "../../utils/gis/Mask";
export default {
  components: {
    TopBarSwitch,
    SensorCont,
    FireCont,
    MineCont,
    BulletBox
  },
  data() {
    return {
      map: null,
      BarName: "预警一张图",

      SensorMap: {},
      FireMap: {},
      MineMap: {},

      // 弹窗数据传递初始化
      dataOutPutData: {},

      statusCom: "",

      zoom: 0,
      lgtd: 0,
      lttd: 0
    };
  },
  watch: {
    statusCom(value) {
      if (value === "") {
        this.$nextTick(() => {
          this.handleMapInit();
        });
      }
    }
  },
  mounted() {
    this.handleMapInit();
    this.gisElement();
  },
  methods: {
    handleStatusCom(e) {
      this.statusCom = e;
    },
    // 弹窗定位显示并展开
    handleZoomTo(data) {
      const to = [data.longitude, data.latitude];
      const view = this.map.getView();
      view.setZoom(18);
      view.animate({
        center: to,
        duration: 0
      });
      // 定位跳转弹窗显示
      const bulletzoomto = this.map.getOverlayById("overlayerform"); // 拿到地图上的弹窗图层
      if (bulletzoomto) {
        bulletzoomto.setPosition([data.longitude, data.latitude]);
        this.dataOutPutData = data; //将传感器信息数据传递给弹窗并显示
      }
    },
    // 重置地图复位弹窗关闭
    handleBackTo() {
      const view = this.map.getView();
      view.setZoom(6);
      view.setCenter([85.06, 42.95]);
      this.closeBulletChange();
    },
    // 关闭弹窗显示
    closeBulletChange() {
      const bullet = this.map.getOverlayById("overlayerform"); // 拿到地图上的弹窗图层
      if (bullet) {
        bullet.setPosition(undefined);
      }
    },
    // 地图基本要素上图
    gisElement() {
      const map = this.map;
      const scaleLine = new ScaleLine({
        target: "scale-line-container-1",
        units: "metric"
      });
      map.addControl(scaleLine);
      map.on("pointermove", e => {
        const coordinate = e.coordinate;
        this.lgtd = coordinate[0].toFixed(6);
        this.lttd = coordinate[1].toFixed(6);
      });
      map.on("moveend", () => {
        this.zoom = Math.round(this.map.getView().getZoom());
      });
    },
    // 导航栏切换
    nowBarNameChange(barname) {
      if (barname === "预警一张图" && Object.keys(this.SensorMap).length) {
        this.BarName = "预警一张图";
        this.SensorMap = this.map;
      } else if (
        barname === "火区数据管理" &&
        Object.keys(this.FireMap).length
      ) {
        this.BarName = "火区数据管理";
        this.FireMap = this.map;
      } else if (
        barname === "矿山信息管理" &&
        Object.keys(this.MineMap).length
      ) {
        this.BarName = "矿山信息管理";
        this.MineMap = this.map;
      }
      this.handleBackTo();
      // this.statusCom == ""
      // console.log("2222222",this.statusCom)
    },
    // 地图初始化
    handleMapInit() {
      const that = this;
      const map = new Map({
        target: this.$refs.mapDOM,
        view: new View({
          projection: "EPSG:4326",
          center: [85.06, 42.95],
          zoom: 6,
          maxZoom: 18,
          minZoom: 6
        }),
        controls: defaultControls({
          zoom: false,
          rotate: false
        })
      });
      const baseLayer = new TileLayer({
        source: new XYZ({
          url:
            "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
          crossOrigin: true
        })
      });
      baseLayer.set("id", "baseLayer");
      map.addLayer(baseLayer);

      // 【0】新疆边界特征点
      const feature = new GeoJSON().readFeatures(BoundaryAreaJson, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:4326"
      })[0];
      // 【1】绘制内部擦除，添加外扩晕染
      const outMask = new MaskFilter({
        feature: feature,
        wrapX: true, //并没有任何变化
        inner: false, //擦除内部，true，反向擦除
        fill: new Fill({
          color: "rgba(8, 16, 42,0.8)"
        }),
        shadowWidth: 15, //向外晕染宽度
        shadowColor: "rgb(48,161,239)" //向外晕染颜色
      });
      baseLayer.addFilter(outMask);
      // outMask.setActive(true);  //?

      // 【2】绘制外部擦除，添加内扩晕染
      const innerMask = new MaskFilter({
        feature: feature,
        wrapX: true, //并没有任何变化
        inner: true, //擦除外部，反向擦除
        fill: new Fill({
          color: "rgba(8, 16, 42,0)"
        }),
        shadowWidth: 15, //向外晕染宽度
        shadowColor: "rgb(48,161,239)" //向外晕染颜色
      });
      baseLayer.addFilter(innerMask);
      // innerMask.setActive(true);  //?

      // 【3】绘制中间线
      const boundaryLayer = new VectorLayer({
        source: new VectorSource({
          features: [feature]
        })
      });
      boundaryLayer.setStyle(
        new Style({
          fill: undefined,
          stroke: new Stroke({
            color: "#fff",
            width: 5
          })
        })
      );
      boundaryLayer.set("id", "boundarylayer");
      map.addLayer(boundaryLayer);
      this.map = map;

      const layers = this.map.getLayers();
      if (layers.array_.length == 2) {
        this.SensorMap = that.map;
        this.FireMap = that.map;
        this.MineMap = that.map;
      }

      const overlayerForm = new Overlay({
        id: "overlayerform", //图层id
        element: this.$refs.msgForm.$el, //图层接管DOM
        autoPan: {
          //定义弹窗在边缘点击不完整，设置自动平移效果
          animation: {
            duration: 250 //自动平移效果的动画时间
          }
        },
        positioning: "top-center"
        // offset: [0, -30],
      });
      overlayerForm.setPosition(undefined);
      this.map.addOverlay(overlayerForm);

      map.on("click", e => {
        const featureData = [];
        const features = map.getFeaturesAtPixel(e.pixel);
        if (features.length > 0) {
          map.forEachFeatureAtPixel(e.pixel, item => {
            let mouse = e.coordinate; //鼠标点击的经纬度坐标位置
            overlayerForm.setPosition(mouse); //设置弹窗显示位置
            featureData.push(item);
          });
          if (featureData[0].values_.props) {
            this.dataOutPutData = featureData[0].values_.props;
          } else {
            this.dataOutPutData = featureData[0];
          }
        } else {
          overlayerForm.setPosition(undefined); // 如果未点击到图层,不显示弹窗
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .map-wrapper {
    width: 100%;
    height: 100%;
  }
}
</style>

<style lang="scss">
.position-bar-container-1 {
  // border: 1px solid red;
  position: absolute;
  bottom: 0;
  height: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "AlibabaPuHuiTi-2-85-Bold";
  font-size: 14px;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #bbcde6;
  text-shadow: 2px 2px 4px rgba(8, 16, 42, 1);
  #scale-line-container-1 {
    position: absolute;
    bottom: 0px;
    left: 900px;
    height: 100%;
    .ol-scale-line {
      bottom: 0px;
      background-color: transparent;
      .ol-scale-line-inner {
        border: 1px solid transparent;
        border-top: none;
        font-family: "AlibabaPuHuiTi-2-85-Bold";
        font-size: 14px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #bbcde6;
        text-shadow: 2px 2px 4px rgba(8, 16, 42, 1);
      }
    }
  }
  .coordinate-lebel-contaienr {
    position: absolute;
    right: 70px;
    height: 30px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    width: 60%;
    align-items: center;
    justify-content: flex-end;
    .lttd-container {
      margin-left: 5%;
    }
  }
  .zoom-label-contaienr {
    position: absolute;
    right: 850px;
    height: 30px;
    line-height: 30px;
  }
}
</style>
